<template>
  <div>
    <div class="page-header-wrap">
      <Header v-model:search="searchProp" @confirm="queryData" />
    </div>
    <div class="page-content-wrap">
      <a-table
        :columns="columns"
        :data-source="resState.list"
        :pagination="pageInfo"
      >
        <template #title>
          <div class="table-header-wrap">
            <a-button type="primary" @click="showEdit">新增</a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span>
              <a-tag v-if="record.status == 1" color="green"> 正常 </a-tag>
              <a-tag v-else color="gray">禁用</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="link" @click="showEdit(record)">编辑</a-button>
              <a-button type="link" @click="showRemove(record)">删除</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <DrawerEdit
      v-model:visible="acState.editVisible"
      v-model:current="acState.current"
      @query="() => queryData(searchProp)"
    />
    <a-modal
      title="删除广告"
      v-model:visible="acState.removeVisible"
      :confirm-loading="acState.loading"
      @ok="handleRemove"
    >
      {{ acState.modalText }}
    </a-modal>
  </div>
</template>

<script setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue"
import { ref, reactive, onMounted } from "vue"
import { selectPageList, remove } from "@/api/advertise"
import Header from "./components/Header.vue"
import DrawerEdit from "./components/DrawerEdit.vue"
import { useActions } from "@/hooks/actions"
import { usePager } from "@/hooks"

const columns = [
  {
    title: "广告名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "广告简介",
    dataIndex: "summary",
    key: "summary",
  },
  {
    title: "广告状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "action",
  },
]
const { pageInfo, rowSelection, queryData, resState } = usePager(selectPageList)
const { acState, showEdit, showRemove } = useActions()

const searchProp = reactive({})

const handleRemove = async () => {
  acState.loading = true
  const { code } = await remove({ id: acState.current.id })
  if (code !== 300) retutn
  acState.loading = false
  acState.removeVisible = false
  queryData(searchProp)
}

onMounted(async () => {
  queryData(searchProp)
})
</script>

<style lang="less"></style>
